<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragment::head(title='分类')}">
</head>
<body>


<!--导航-->
<nav class="ui inverted attached segment" th:replace="~{fragment::nav(n=2)}">
</nav>



<!--中间内容-->
<div class="ui container m-padded-tb-massive">

    <div class="ui segment top attached">
        <div class="ui two column grid">
            <div class="column">
                <h3>分类</h3>
            </div>

            <div class="column right aligned">
                共<h3 class="ui header orange m-inline-block" th:text="${typeCount}"></h3>个分类
            </div>
        </div>
    </div>
    <div class="ui segment teal attached">
        <div th:each="type:${typeList}" class="ui labeled button label m-margin-tb" tabindex="0">

            <div class="ui red button" th:attr="data-typeid=${type.id}" onclick="ajaxfunc(this)">
                <i class="heart icon"></i>
                <span th:text="${type.name}"></span>
            </div>
            <a class="ui basic red left pointing label" th:text="${type.count}"></a>
        </div>
    </div>

    <div class="ui segment attached" id="blog-block">
<!--        博客内容-->
    </div>

</div>






<footer class="ui inverted vertical segment" th:replace="~{fragment::footer}">
</footer>



<th:block th:replace="~{fragment :: script}">
</th:block>



<script type="text/javascript">

$(function () {
    $.ajax({
        url:"/user/listBlog",
        type:"get",
        success:function (res) {
            $('#blog-block').html(res)
            console.log(res);
        }
    })
})

//函数

function ajaxfunc(btn){
    var typeid=$(btn).data("typeid");
    $.ajax({
        url:"/user/listBlog",
        type:"get",
        data:{
            "keytid":typeid,
        },
        success:function (res) {
            $('#blog-block').html(res)
        }
    })
}

//分页函数
function pageH(curr) {
    var currpage=$(curr).data("curr");
    $.ajax({
        url:"/user/listBlog",
        type: "get",
        data:{
            "currentPage":currpage,
        },
        success:function (res) {
            $('#blog-block').html(res)
        }
    })
}

    //弹出
    $('#pay-btn').popup({
        popup:$('#pay'),
        on:'click',
        position:'bottom center',
    })
</script>
</body>
</html>